<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      /* 
        nth-child可以获取指定第n个子元素
        注意: 此处的n可以写1~n的数字,也可以写算式
              例如:
              n                 全部
              2n                偶数    even
              2n + 1            奇数    odd
              几n               n的倍数
              -n + m            前m个元素
              n + m             后m个元素
              -n + m1 n + m2    从第m2个到第m1个元素
      */
      /* .box p:nth-child(n + 4) {
        color: red;
      } */

      /* 获取3~6的p */
      p:nth-child(-n + 6):nth-child(n + 3) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>段落1</p>
      <p>段落2</p>
      <p>段落3</p>
      <p>段落4</p>
      <p>段落5</p>
      <p>段落6</p>
      <p>段落7</p>
      <p>段落8</p>
    </div>
  </body>
</html>
